<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>message</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>


	<div class="form-group">
		<label for="message">留言</label>
		<textarea placeholder="留言吧" rows="4" class="form-control" id="msg"></textarea>
	</div>


	<div align="center">
		<button class="btn btn-success btn-block" onclick="messageTo()">留言</button>
	</div>


  <div id = "msgList">

  </div>






	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<script type="text/javascript">
function messageTo(){
	var msg = $("#msg").val();
	//alert(msg);
	
	if(msg == ""){
		alert("留言不能为空");
		return;
	}
	
	$.ajax({
		async : false,
		type : "POST",
		url : "http://localhost:8080/user/message",
		dataType:"text",
		data : {
			"message": msg,
		},
		success : function(msg) {
			alert("留言成功");
			location.reload(true);
			return;
		},
		error : function(){
			alert("留言失败");
			return;
		}
	})
}
</script>

<script type="text/javascript">
$(function(){
	
	$.ajax({
		async : false,
		type : "POST",
		url : "http://localhost:8080/user/messageList",
		dataType:"json",
		success : function(data){
			var str="<ul>";
			$.each(data,function(i,n){  
                str+="<li>"+"姓名："+n.name+"</li>";
                str+="<li>"+"留言内容："+n.message+"</li>";
                str+="<li>"+"时间："+n.date+"</li>";
            });  
            str+="</ul>";  
            $("#msgList").append(str); 
		},
		error: function(data) {
			alert(1);
		},
	})
})
</script>

</body>
</html>